<!--
 * @Author: typ
 * @Date: 2025-02-18 17:14:42
 * @LastEditors: typ
 * @LastEditTime: 2025-02-26 08:44:02
 * @FilePath: /onemap/src/components/shezhi/opacity.vue
 * @Description: 图层透明度控制组件
-->
<template>
  <div class="opacity-container">
    <!-- 顶部透明度控制区域 -->
    <div class="top-control">
      <div class="selected-layer-info">
        <span>不透明度：</span>
        <el-slider v-model="opacityLayer" :min="0" :max="100" @change="handleOpacityChange" size="small"
          class="opacity-slider" />
        <el-input-number controls-position="right" class="number-input" v-model="opacityLayer" :min="0" :max="100"
          @change="handleOpacityChange" size="small">
        </el-input-number>
      </div>
      <el-button v-if="selectedNodes?.length" type="text" @click="deleteLayer" class="delete-btn"
        :icon="Delete"></el-button>
    </div>

    <!-- 图层树 -->
    <el-tree ref="treeRef" empty-text="暂无图层" :data="treeData" :props="defaultProps" node-key="id"
      :expand-on-click-node="false" class="custom-tree" @node-click="handleNodeClick">
      <template #default="{ node, data }">
        <div class="custom-tree-node" :class="selectedNodes?.includes(data.id) ? 'node-selected' : ''">
          <div class="node-content">
            <el-icon class="visibility-icon" @click.stop="toggleVisibility(data)">
              <img src="../../assets/layerTree/打开图层@2x.png" alt="打开" v-if="data.show">
              <img src="../../assets/layerTree/关闭图层@2x.png" alt="关闭图层" v-else>
            </el-icon>
            <span class="layer-name">{{ node.label }}</span>
          </div>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { Delete } from '@element-plus/icons-vue'
import { removeLayer } from "@/mixin/server";
// 树形数据
const treeData = ref(null);
const opacityLayer = ref(100);
const selectedNodes = ref([]); // 存储选中的节点
const isCtrlPressed = ref(false); // 控制Ctrl键状态
const treeRef = ref(null);
const defaultProps = {
  children: 'children',
  label: 'name'
};

const { proxy } = getCurrentInstance();


// 添加键盘事件监听
onMounted(() => {
  const layers = window.viewer.imageryLayers._layers?.map(i => {
    return {
      id: i.uuid,
      name: i.tname,
      show: i.show,
    }
  })
  treeData.value = layers;
  // 添加键盘事件监听
  window.addEventListener('keydown', handleKeyDown);
  window.addEventListener('keyup', handleKeyUp);
});

// 处理键盘按下事件
const handleKeyDown = (event) => {
  if (event.key === 'Control' || event.key === 'Meta') {
    isCtrlPressed.value = true;
  }
};

// 处理键盘释放事件
const handleKeyUp = (event) => {
  if (event.key === 'Control' || event.key === 'Meta') {
    isCtrlPressed.value = false;
  }
};

// 处理节点点击
const handleNodeClick = (data) => {
  const nodeIndex = selectedNodes.value.findIndex(i => i === data.id);
  if (isCtrlPressed.value) {
    if (nodeIndex > -1) {
      selectedNodes.value.splice(nodeIndex, 1);
    } else {
      selectedNodes.value.push(data.id);
    }
  } else {
    if (nodeIndex > -1) {
      selectedNodes.value.splice(nodeIndex, 1);
    } else {
      selectedNodes.value = [data.id];
    }
  }
};


// 切换图层可见性
const toggleVisibility = (data) => {
  // 获取对应的Cesium图层
  const layer = window.viewer.imageryLayers._layers.find(layer => layer.uuid === data.id);
  if (layer) {
    // 切换图层显示状态
    layer.show = !layer.show;
    // 更新树节点状态
    data.show = layer.show;
  }
};

// 处理图层透明度变化
const handleOpacityChange = () => {
  if (!selectedNodes.value.length) return proxy.$modal.msgWarning('请选择图层');
  selectedNodes.value.forEach(id => {
    const layer = window.viewer.imageryLayers._layers.find(layer => layer.uuid === id);
    console.log('layer', layer)
    if (layer) {
      layer.alpha = opacityLayer.value / 100;
    }
  });
};

// 删除图层
const deleteLayer = () => {
  selectedNodes.value.forEach(id => {
    const layerIndex = window.viewer.imageryLayers._layers.findIndex(layer => layer.uuid === id);
    if (layerIndex > -1) {
      window.viewer.imageryLayers.remove(window.viewer.imageryLayers._layers[layerIndex]);
    }
  });
  // 更新树形数据
  const layers = window.viewer.imageryLayers._layers?.map(i => ({
    id: i.uuid,
    name: i.tname,
    show: i.show,
  }));
  treeData.value = layers;
  // 清空选中状态
  selectedNodes.value = [];
};
</script>
<style lang="scss" scoped>
.opacity-container {
  width: 100%;
  height: 100%;
  color: #fff;
  padding: 12px;

  .top-control {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .selected-layer-info {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      padding-left: 12px;
      padding-top: 12px;
      margin-bottom: 12px;

      .layer-name {
        min-width: 80px;
      }

      .opacity-slider {
        flex: 1;
        max-width: 125px;
      }
    }

    ::v-deep .number-input {
      width: 70px;
      text-align: center;
      margin-left: 12px;

      .el-input-number__decrease,
      .el-input-number__increase {
        background-color: rgba(16, 32, 46, 0.5);
        color: white;
        border: none;
      }

      .el-input__wrapper {
        background-color: rgba(16, 32, 46, 0.5);
        border-color: #47506A;

        .el-input__inner {
          color: white;
        }
      }
    }

    .delete-btn {
      margin-left: 10px;
      width: 20px;
      height: 20px;
      color: #fff;
    }
  }

  .custom-tree {
    background-color: transparent;

    :deep(.el-tree-node__content) {
      background-color: transparent;
      height: 40px;
      margin-top: 5px;

      &:hover {
        background-color: rgba(101, 162, 255, 0.1);
      }
    }
  }

  .custom-tree-node {
    width: 100%;
    display: flex;
    align-items: center;
    padding-right: 10px;

    &.node-selected {
      background-color: rgba(101, 162, 255, 0.1);

      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
    }

    .node-content {
      display: flex;
      align-items: center;
      gap: 8px;

      .visibility-icon {
        cursor: pointer;

        img {
          width: 20px;
          height: 20px;
        }
      }

      .layer-name {
        color: #fff;
        font-size: 14px;
      }
    }
  }

  :deep(.el-slider) {
    .el-slider__runway {
      height: 10px;
      border-radius: 2px;
      background: url('@/assets/layerTree/滑块.png') repeat-x !important;
      background-size: 100% 100% !important;
    }

    .el-slider__bar {
      height: 4px;
      background: transparent;
      border-radius: 2px;
    }

    .el-slider__button {
      width: 10px;
      height: 10px;
      border: 3px solid #FFFFFF;
      background: black;
      box-shadow: 0px 0px 4px 0px rgba(0, 141, 220, 0.5);
      margin-top: 5px;
    }

    .el-slider__button:hover {
      transform: scale(1.1);
    }
  }
}

::v-deep .el-tree-node {
  .custom-tree-node {
    padding-left: 12px;
  }

  .el-tree-node__expand-icon {
    display: none;
  }

  .el-tree-node__children {
    .el-tree-node__content::before {
      display: none;
    }
  }
}
</style>
